<template>
    <div class="real_time">
      <!-- 第一行 -->
    <div class="first">
      <div>
          <div id="grz_container" style="height:300px"></div>
      </div>
      <div>
          <!--国内治愈率-->
      <div id="zyl_container" style="height:300px"></div>
      </div>
      <div>
        <!-- 确认城市top10 -->
        <div id="city_container" style="height:300px"></div>
      </div>
    </div>
    <!-- 第二行 -->
    <div class="second">
      <div id="qz_container" style="height:300px"></div>
    </div>
  </div>
</template>
<script>
export default {
    mounted() {
    // 全国确诊病例城市top10
    var chart = Highcharts.chart('city_container',{
        chart: {
            type: 'column'
        },
        title: {
            text: '全国确诊病例城市top10'
        },
        subtitle: {
            text: '数据来源: WorldClimate.com'
        },
        xAxis: {
            categories: [
                '广东','新疆','福建','山东','浙江','河北','四川','陕西','河南','天津'
            ],
            crosshair: true
        },
        yAxis: {
            min: 0,
            title: {
                text: '确证人数'
            }
        },
        tooltip: {
            // head + 每个 point + footer 拼接成完整的 table
            headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
            pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
            '<td style="padding:0"><b>{point.y} </b></td></tr>',
            footerFormat: '</table>',
            shared: true,
            useHTML: true
        },
        plotOptions: {
            column: {
                borderWidth: 0
            }
        },
        series: [{
            name: '中国',
            data: [100, 90, 80, 70, 60, 50, 40, 30, 20, 10]
        }]
    });
    // 全国新增病例
    var chart = Highcharts.chart("qz_container", {
      chart: {
        type: "line",
      },
      title: {
        text: "全国新增确诊病例",
      },
      subtitle: {
        text: "数据来源: WorldClimate.com",
      },
      xAxis: {
        categories: [
         '广东','新疆','福建','山东','浙江','河北','四川','陕西','河南','天津','山西','江西'
        ],
      },
      yAxis: {
        title: {
          text: "人数",
        },
      },
      plotOptions: {
        line: {
          dataLabels: {
            // 开启数据标签
            enabled: true,
          },
          // 关闭鼠标跟踪，对应的提示框、点击事件会失效
          enableMouseTracking: false,
        },
      },
      series: [
        {
          name: "中国",
          data: [
            32,15,100, 10, 26, 7, 5, 5, 4, 35, 14, 20
          ],
        },
      ],
    });
     //全国治愈率
var chart = Highcharts.chart('zyl_container', {
	chart: {
		type: 'spline'
	},
	title: {
		text: '全国治愈率'
	},
	subtitle: {
		text: '数据来源: WorldClimate.com'
	},
	xAxis: {
		categories: ['一月', '二月', '三月', '四月', '五月', '六月',
					 '七月', '八月', '九月', '十月', '十一月', '十二月']
	},
	yAxis: {
		title: {
			text: '百分比'
		},
		labels: {
			formatter: function () {
				return this.value + '%';
			}
		}
	},
	tooltip: {
		crosshairs: true,
		shared: true
	},
	plotOptions: {
		spline: {
			marker: {
				radius: 4,
				lineColor: '#666666',
				lineWidth: 1
			}
		}
	},
	series: [{
		name: '中国',
		marker: {
			symbol: 'square'
		},
		data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 30, 35, 40, 62, 80]
	}]
});
//现有确证人数，无症状感染者人数
var chart = Highcharts.chart('grz_container', {
    chart: {
        type: 'column'
    },
    title: {
        text: '现有确证人数，无症状感染者人数'
    },
    subtitle: {
        text: '数据截止 2020-03，来源: <a href="https://en.wikipedia.org/wiki/List_of_cities_proper_by_population">Wikipedia</a>'
    },
    xAxis: {
        type: 'category',
        labels: {
            rotation: -45  // 设置轴标签旋转角度
        }
    },
    yAxis: {
        min: 0,
        title: {
            text: '人口 (百万)'
        }
    },
    legend: {
        enabled: false
    },
    tooltip: {
        pointFormat: '人口总量: <b>{point.y:.1f} 百万</b>'
    },
    series: [{
        name: '总人口',
        data: [
            ['上海', 24.25],
            ['新疆', 23.50],
            ['北京', 21.51],
            ['湖南', 16.78],
            ['重庆', 16.06],
            ['天津', 15.20],
            ['江西', 14.16],
            ['山东', 13.51],
            ['广州', 13.08],
            ['河北', 12.44],
            ['湖北', 12.19],
            ['辽宁', 12.03],
            ['深圳', 10.46],
            ['海南', 10.07],
            ['内蒙古', 10.05],
            ['黑龙江', 9.99],
            ['江苏', 9.78],
            ['云南', 9.73],
            ['浙江', 9.27],
            ['福建', 8.87]
        ],
        dataLabels: {
            enabled: true,
            rotation: -90,
            color: '#FFFFFF',
            align: 'right',
            format: '{point.y:.1f}', // :.1f 为保留 1 位小数
            y: 10
        }
    }]
});
  },
};
</script>
<style scoped>
/*  第一行 */
.real_time > .first {
  display: flex;
  text-align: center;
}
.real_time > .first > div {
  flex: 1;
}
/* 第二行 */
.real_time > .second {
  text-align: center;
}

</style>
